<template>
  <swiper  :options="swiperOption" :not-next-tick="notNextTick" ref="mySwiper">
    <swiper-slide  v-for="(item,index) in imgData" :key="item" >
      <div class="img" :style="{backgroundImage: 'url(' + item.small + ')'}" ></div>
    </swiper-slide>
    <div class="swiper-pagination"  slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev">
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="64">
        <line x1="18" y1="10" x2="4" y2="33" style="stroke:#fff;stroke-width:3"/>
        <line x1="4" y1="31" x2="18" y2="54" style="stroke:#fff;stroke-width:3"/>
      </svg>
    </div>
    <div class="swiper-button-next" slot="button-next">
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="64">
        <line x1="3" y1="10" x2="17" y2="33" style="stroke:#fff;stroke-width:3"/>
        <line x1="17" y1="31" x2="3" y2="54" style="stroke:#fff;stroke-width:3"/>
      </svg>
    </div>
  </swiper>
</template>

<script>
  require('swiper/dist/css/swiper.css')
  export default {
    name: 'carousel',
    props: {
      imgData: {
        type: Array,
        required: true
      }
    },
    data () {
      return {
        notNextTick: true,
        swiperOption: {
          pagination: '.swiper-pagination',
          prevButton: '.swiper-button-prev',
          nextButton: '.swiper-button-next',
          paginationClickable: true,
          centeredSlides: true,
          autoplay: 3000,
          loop: true,
          autoplayDisableOnInteraction: false
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .swiper-container{
    height: 375px;
    .img{
      height: 100%;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
    }
  }
</style>

<style lang="scss" >
.detail{
    .swiper-button-next, .swiper-button-prev{
      height: 64px;
      width: 21px;
      background: rgba(0,0,0,0.3);
    }
    .swiper-button-next{
      right: 0;
    }
    .swiper-button-prev{
      left: 0;
    }
    .swiper-pagination-bullet {
      background: #fff;
      opacity: 1;
    }
    .swiper-pagination-bullet-active {
      background: #fcaf16;
    }
}
</style>
